@charset "utf-8";

*{padding: 0;margin: 0;font-family: "微软雅黑";
outline: none;box-sizing: border-box;font-weight: normal;}
img{border: none;}
a{text-decoration: none;}
ul{list-style: none;}


.template:before{
	padding: 25px 0 55px 0;width: 100%;overflow: hidden;
	background-size: cover;
	width: 100%;
	height: 90%;
	content: "";
	position: absolute;
	top: 0;left: 0;
	z-index: -1;
	-webkit-filter:blur(2px);
	filter: blur(2px);
}
.template{cursor: pointer;}
.template .title{font-size: 28px;text-align: center;color: #333;}
.template .subtitle{font-size: 16px; margin-top: 7px;
text-align: center;color: #777;}
.category{text-align: center;}
.category ul{overflow: hidden;margin-top: 20px;background-color: #fff;
box-shadow: 0 0 4px rgba(0,0,0,0.1);
border-radius: 3px;display: inline-block;}
.category ul li{float: left;display: inline-block;
font-size: 16px;height: 35px;line-height: 35px;width: 140px;
text-align: center;cursor: pointer;}
.category ul li:after{content: '';height: 50%;
border-left: 1px solid #eee;position: absolute;right: 0px;top: 25%;}
.category ul li:last-child:after{border-left: none;}
.category ul li:hover{color: #fe782f;}
.category ul li.active{background: #fe782f;color: #fff;}
.category ul li.active:after{border-left: none;}
.content{width: 1133px;height:auto;display: none;margin: 0 auto;margin-top: 20px;}
.content.active{display: block;cursor: pointer;}
.content .content-left{
	width: 400px;height: 100%;border: 1px solid #e4e4e4;float: left;
}
.content .content-right{
margin-left: 10px;
width: 45%;height: 100px;
float: left;
}
/*.content ul{width: 100%;margin: 0 auto;}*/
.content ul li{float: left;width: 98%;height: 98%;
transition: transform .3s ease,box-shadow .3s ease;}
/*.content ul li:last-child{margin-right: 0;}
.content ul li .img{width: 100%;}*/
.content ul li .img img{width: 100%;height: 100%;margin: 4px;}
/*.content ul li .bg{transition: opacity .3s;position: absolute;
top: 0; left: 0; width: 420px;
height: 310px;background: rgba(0,0,0,0);text-align: center;}
.content ul li .bg img{display:inline-block;
width: 30%;margin-top: 20px;border-radius: 3px;opacity: 0;
transition: opacity .5s;}*/
.content ul li:hover{transform: translate3d(0,-3px,0);}
/*.content ul li:hover .bg{background: rgba(0,0,0,0.2);}
.content ul li:hover .bg img{opacity: 0.8;}
.content #top{width: 65%;height: auto;border: 1px red solid;
margin: 0 auto;margin-top: 250px;}*/

.xiangqing{
	margin: 0 auto;
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	border: 3px solid #add;
	background: linear-gradient(-45deg,#f6e481,#c5fc94);

}
